<script setup lang='ts'>
import axios, { type AxiosResponse } from 'axios';
import { onMounted, ref } from 'vue';

// {}[]对象数组 鸿蒙需要定义接口
type BannerList = {
    imgUrl: string
}[]
interface Result {
    code: string
    msg: string
    result: BannerList
}

const list = ref<BannerList>([]) // 确定类型

const person = ref<{
    name: string
    age: number
}>({
    name: '郁清棠',
    age: 28
})
// 获取轮播图数据
const getBanner = async () => {
    const res = await axios.get<null, AxiosResponse<Result>>("https://meikou-api.itheima.net/home/banner")
    list.value = res.data.result
}
// 挂载周期
onMounted(() => {
    getBanner()
})

</script>

<template>
    <div class="container">
        <!-- 谁循环就写在谁身上 v-for -->
        <img :key="item.imgUrl" :src="item.imgUrl" alt="" v-for="(item, index) in list">
    </div>
    <p>
    <ul>
        <li v-for="(value, key) in person" :key="key">{{ value }}-{{ key }}</li>
    </ul>
    </p>
    <p>

    <ul>
        <!-- 遍历1-100数字 -->
        <li v-for="item in 100">{{ item }}</li>
    </ul>
    <!-- ol有序列表 -->
    <ol>
        <li v-for="item in 10"></li>
    </ol>

    </p>

</template>
<!-- scoped:使样式仅在当前组件内生效，避免样式冲突-->
<style scoped>
.container {
    width: 100%;
    height: 200px;
}

.container img {
    width: 300px;
    height: 100%;
    margin: 10px 20px;
}
</style>